<template>
  <div class="userlist">
    <div class="userlist-header">
      <div class="userlist-title">账号列表</div>
      <div class="userlist-buttons">
        <div class="account-save">
          <div class="saveaccount-input">
            <el-input
              class="saveaccountinput"
              v-model="saveaccountkeyword"
              placeholder="输入关键词查询账号"
            ></el-input>
          </div>
          <div class="saveaccount-inputbut">
            <el-button @click="getsaveaccount()">查询</el-button>
          </div>
        </div>
        <el-button
          class="adduser-button"
          type="primary"
          @click="addaccountdialog()"
          >新增账号</el-button
        >
      </div>
    </div>
    <div class="userlist-content" style="height: 70%">
      <el-table
        :data="accounttableData"
        border
        style="width: 100%; height: 100%; font-size: 12px"
      >
        <el-table-column prop="account" label="账号" width="150" />
        <el-table-column prop="accountsarr" label="有权限用户" />
        <el-table-column label="操作" width="150">
          <template #default="scope">
            <div class="userbuttons">
              <!-- <el-button size="small" @click="editaccount(scope.row)"
                >编辑</el-button
              > -->
              <el-button
                v-if="scope.row.isadmin != 2"
                size="small"
                type="danger"
                @click="deleteaccount(scope.row)"
                >删除</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="userlist-footer">
      <el-pagination
        v-model:current-page="currentpage"
        v-model:page-size="pagesize"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="prev, pager, next, jumper"
        :total="total"
        @current-change="getsaveaccount"
      />
    </div>

    <el-dialog
      v-model="changeaccountdialogVisible"
      title="新增账号"
      width="600"
    >
      <div>
        <el-scrollbar
          style="height: 50vh"
          wrap-class="addaccountscro"
          view-class="addaccountscro"
        >
          <el-form :model="addaccountform" label-width="50" style="width: 100%">
            <el-form-item label="账号" prop="username">
              <!-- <el-input v-model="addaccountform.accounts" /> -->
              <el-input
                v-model="addaccountform.accounts"
                :autosize="{ minRows: 6, maxRows: 10 }"
                style="font-size: 13px"
                type="textarea"
                placeholder="请输入账号名。多个账号之间用英文,隔开"
              />
            </el-form-item>
          </el-form>
        </el-scrollbar>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="closeAddaccount()">取消</el-button>
          <el-button type="primary" @click="submitAddaccount()">
            提交
          </el-button>
        </div>
      </template>
    </el-dialog>

    <el-dialog v-model="editaccountVisible" title="编辑账号" width="600">
      <div>
        <el-scrollbar
          style="height: 50vh"
          wrap-class="addaccountscro"
          view-class="addaccountscro"
        >
          <el-form
            :model="editaccountdata"
            label-width="100"
            style="width: 100%"
          >
            <el-form-item label="账号" prop="username">
              <el-input
                v-model="editaccountdata.account"
                style="width: 300px"
                disabled
              />
            </el-form-item>
            <el-form-item label="权限用户" prop="username">
              <div>
                <div>
                  <el-input
                    v-model="editaccountdata.account"
                    style="width: 200px"
                    placeholder="输入关键词查询用户"
                  />
                  <el-button style="margin-left: 20px">查询</el-button>
                </div>

                <div>1111111</div>
                <div>222222</div>
              </div>
            </el-form-item>
          </el-form>
        </el-scrollbar>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="closeAddaccount()">取消</el-button>
          <el-button type="primary" @click="submitAddaccount()">
            提交
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
  
  <script setup lang="ts">
import { ref, onMounted, reactive } from "vue";
import {
  useSaveApi,
  register,
  setuserIsadmin,
  deleteUser,
} from "@/api/user/index.ts";

import {
  addaccount,
  saveAccountlist,
  deleteAccount,
} from "@/api/account/index.ts";
import { ElMessage, ElMessageBox } from "element-plus";

import type { ComponentSize, FormInstance, FormRules } from "element-plus";

const accounttableData = ref([]);

const changeaccountdialogVisible = ref(false);
const addaccountform = ref({
  accounts: "",
});

const editaccountdata = ref({});
const editaccountVisible = ref(false);
const saveuserdatas = ref([]);

const saveaccountkeyword = ref("");
const pagesize = ref(20);
const currentpage = ref(1);
const total = ref(0);

const addaccountdialog = () => {
  changeaccountdialogVisible.value = true;
  addaccountform.value.accounts = "";
};

const closeAddaccount = () => {
  changeaccountdialogVisible.value = false;
  addaccountform.value.accounts = "";
};

// 提交新增账号
const submitAddaccount = () => {
  if (addaccountform.value.accounts == "") {
    ElMessage({
      message: "请输入账号名",
      type: "warning",
    });
  } else {
    console.log(addaccountform.value.accounts);
    let data = {
      data: addaccountform.value.accounts,
    };
    addaccount(data).then((res) => {
      if (res.code == 200) {
        ElMessage({
          message: `添加账号成功，${res.data.success}个账号新增成功,${res.data.error}个账号已有`,
          type: "success",
        });
        changeaccountdialogVisible.value = false;
        addaccountform.value.accounts = "";
        getsaveaccount();
      }
    });
  }
};

// 查询账号列表
const getsaveaccount = () => {
  let data = {
    keyword: saveaccountkeyword.value,
    pagesize: pagesize.value,
    currentpage: currentpage.value,
  };
  saveAccountlist(data).then((res) => {
    console.log(res);
    if (res.code == 200) {
      ElMessage({
        message: "账号列表查询成功",
        type: "success",
      });
      // accounttableData.value = res.data;
      let resdata = res.data;
      total.value = res.total;

      useSaveApi().then((res2) => {
        let res2data = res2.data;
        console.log(res2data);

        resdata.forEach((item) => {
          item.accountsarr = [];
          res2data.forEach((item2) => {
            if (item2.accounts != null) {
              let accountids = item2.accounts.split(",").map(Number);
              let exists = accountids.some((item3) => item3 === item.id);
              if (exists) {
                item.accountsarr.push(item2.name);
              }
            }
          });
        });

        console.log(resdata);
        accounttableData.value = resdata
      });
    }
  });
};

// 删除账号
const deleteaccount = (row) => {
  ElMessageBox.confirm(`是否删除账号 ${row.account}`, "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      let data = {
        id: row.id,
      };
      deleteAccount(data).then((res) => {
        if (res.code == 200) {
          ElMessage({
            type: "success",
            message: "删除成功",
          });
          getsaveaccount();
        }
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消",
      });
    });
};

onMounted(() => {
  getsaveaccount();
});
</script>
  
  <style scoped>
.userlist {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.userlist-header {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid #dcdfe6;
}
.userlist-title {
  font-size: 16px;
  font-weight: bold;
}
.adduser-button {
  font-size: 12px;
}
.userlist-content {
  padding: 10px 0;
  flex: 1;
}
.userlist-footer {
  height: 40px;
  display: flex;
  justify-content: center;
}

.userbuttons {
  width: 100%;
  display: flex;
}

.userlist-buttons {
  display: flex;
}
.account-save {
  display: flex;
  margin-right: 150px;
}
.saveaccount-input {
  font-size: 13px;
}
.saveaccountinput {
  font-size: 13px;
}
.saveaccount-inputbut {
  margin-left: 20px;
}
</style>

<style>
.addaccountscro {
  display: flex;
  width: 100%;
}
</style>
  
 